<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>



    <style>
        table {
            width: 600px;
            cursor: pointer;
        }

        table td {
            text-align: center;
        }

        table th {
            background-color: blueviolet;
        }

        table tr {
            background-color: pink;
        }
    </style>
</head>

<body>

    <!-- 题目描述

用户在页面上点击按钮,可以把文本框中的数据在表格的新的一行中显示，具体表现如下图：

1）如果如果输入框内容有一项为空，弹出对话框‘请将数据填入完全 -->




    <div id="dv">
        请输入姓名:
        <input type="text" value="" id="uname" />
        <br /> 请输入邮箱:
        <input type="text" value="" id="email" />
    </div>

    <input type="button" value="添加" id="btn" />
    <table border="1" cellpadding="0" cellspacing="0" id="tb">
        <thead>
            <tr>
                <th>姓名</th>
                <th>邮箱</th>
            </tr>
        </thead>
        <tbody id="tbd">
            <tr>
                <td>小黑</td>
                <td>xiaohei@126.com</td>
            </tr>
        </tbody>
    </table>


    <script>

        // - 训练提示

        //   1.按钮注册单击事件

        //   2.获取并判断文本框的内容


        var btn = document.getElementById('btn')
        // var tb=document.getElementById('tb')
        var uname = document.getElementById('uname')
        var email = document.getElementById('email')
        var tbd = document.getElementById('tbd')

        // var tbd=tb.children[0]
        btn.onclick = function () {
           
            if (uname.value == '' || email.value == '') {
                alert('请将数据填入完全')
               
            }
            // 4.创建行并添加到tbody中

            var tr = document.createElement('tr')
            tbd.appendChild(tr);
            // 5.创建列，并设置内容
            var td1 = document.createElement('td');
            td1.innerHTML = uname.value;
            var td2 = document.createElement('td');
            td2.innerHTML = email.value;
            // 把两个列放到行中,内容分别是uname email的值
            tr.appendChild(td1);
            tr.appendChild(td2);
        }


    </script>

</body>

</html>